<script setup>
	import { onMounted, ref } from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
	} from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const keywords = ref('')
	function searchSend() {
		if (keywords.value == '') {
			return
		}
		if (activeIndex.value == 0) {
			goodsList.value = []
			getgoods()
		} else {
			txList.value = []
			wxList.value = []
			getdrawList()
		}
	}

	//tab
	const activeIndex = ref(0)
	const offsetTop = ref(0)
	function chooseTab(name, title) {
		if (keywords.value == '') {
			return
		}
		isYs.value = 0
		iscurrent.value = ''
		sales.value = ''
		price.value = ''
		sort.value = ''
		currentPage.value = 1
		txList.value = []
		wxList.value = []
		goodsList.value = []
		activeIndex.value = name
		if (activeIndex.value == 0) {
			getgoods()
		} else {
			console.log('zou')
			getdrawList()
		}
	}

	//搜索赏品
	//获取商品
	const goodsList = ref([])
	const sort = ref('')
	const currentPage = ref(1)
	const isYs = ref(0)
	async function getgoods() {
		console.log(keywords.value)
		const res = await http.request({
			url: '/api/goods/getGoods',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				class_id: 0,
				keywords: keywords.value,
				order_by: sort.value,
				is_ys: isYs.value,
			},
		})
		goodsList.value = [...goodsList.value, ...res.data]
		console.log(goodsList.value)
	}

	async function hope(id) {
		const res = await http.request({
			url: '/api/goods/scPost',
			method: 'POST',
			data: {
				id: id,
				type: '1',
			},
		})
		console.log(res)
		if (res.st == 1) {
			goodsList.value.forEach((item) => {
				if (item.id == id) {
					if (item.is_sc == 1) {
						--item.sc_num
						item.is_sc = 0
					} else if (item.is_sc == 0) {
						++item.sc_num
						item.is_sc = 1
					}
				}
				console.log(item)
			})
			uni.showToast({
				title: '操作成功',
				duration: 2000,
			})
		} else {
			uni.showToast({
				title: '操作失败',
				icon: 'error',
				duration: 2000,
			})
		}
	}

	// 排序
	const iscurrent = ref('')
	const sales = ref('')
	const price = ref('')
	function sorce(now) {
		isYs.value = 0
		goodsList.value = []
		iscurrent.value = now
		if (now == 'comprehensive') {
			sales.value = ''
			price.valu = ''
			sort.value = 'comprehensive,desc'
		} else if (now == 'sales_initial') {
			price.value = ''
			if (sort.value == 'sales_initial,desc') {
				sort.value = 'sales_initial,asc'
				sales.value = 'asc'
			} else if (sort.value == 'sales_initial,asc') {
				sort.value = 'sales_initial,desc'
				sales.value = 'desc'
			} else {
				sort.value = 'sales_initial,desc'
				sales.value = 'desc'
			}
		} else if (now == 'price') {
			sales.value = ''
			if (sort.value == 'price,desc') {
				sort.value = 'price,asc'
				price.value = 'asc'
			} else if (sort.value == 'price,asc') {
				sort.value = 'price,desc'
				price.value = 'desc'
			} else {
				sort.value = 'price,desc'
				price.value = 'desc'
			}
		}
		if (activeIndex.value == 0) {
			goodsList.value = []
			getgoods()
		} else {
			txList.value = []
			wxList.value = []
			getdrawList()
		}
	}

	function goodslower() {
		++currentPage.value
		getgoods()
	}
	// function YS() {
	// 	goodsList.value = []
	// 	isYs.value = 1
	// 	iscurrent.value = 'ys'
	// 	getgoods()
	// }

	function wxlower() {
		++currentPage.value
		getdrawList()
	}

	function txlower() {
		++currentPage.value
		getdrawList()
	}
	// 去看商品详情
	function goMallInfo(id) {
		uni.navigateTo({
			url: `/homePage/goodsinfo/index?id=${id}`,
		})
	}

	//盲盒搜索
	//跳转天选
	const txList = ref([])
	const wxList = ref([])
	async function getdrawList() {
		const res = await http.request({
			url: '/api/box/boxList',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				type: activeIndex.value,
				scene: 0,
				keywords: keywords.value,
				order_by: sort.value,
			},
		})
		if (activeIndex.value == 1) {
			txList.value = [...txList.value, ...res.data]
		} else if (activeIndex.value == 2) {
			wxList.value = [...wxList.value, ...res.data]
		}
		console.log(res)
	}
	function goTX(id) {
		uni.navigateTo({
			url: `/drawPage/txDraw/index?id=${id}`,
		})
	}
	//跳转无限
	function goWX(id) {
		uni.navigateTo({
			url: `/drawPage/wxDraw/index?id=${id}`,
		})
	}
</script>

<template>
	<view class="mall">
		<view class="" style="padding: 0 20rpx; background-color: #fff">
			<uni-search-bar
				class="uni-mt-10"
				radius="28"
				placeholder="搜索..."
				clearButton="none"
				cancelButton="none"
				@confirm="searchSend"
				@clear="searchSend"
				v-model="keywords"
				bgColor="#ECEDEE"
				:focus="true"
			/>
		</view>
		<y-tabs
			v-model="activeIndex"
			sticky
			:offsetTop="offsetTop"
			@change="chooseTab"
		>
			<y-tab class="y-tab-virtual" :title="'商品'" name="0">
				<view class="content-goods-wrap">
					<!-- 筛选 -->
					<view class="sort">
						<view
							class="sort-item"
							:class="{ active: iscurrent == 'comprehensive' }"
							@click="sorce('comprehensive')"
						>
							综合
						</view>
						<view class="sort-item">
							<view
								:class="{
									active: iscurrent == 'sales_initial',
								}"
								@click="sorce('sales_initial')"
							>
								销量
							</view>
							<image
								style="width: 14rpx; height: 24rpx"
								src="../../static/asc.png"
								v-if="sales == 'asc'"
							></image>
							<image
								style="width: 14rpx; height: 24rpx"
								src="../../static/desc.png"
								v-else-if="sales == 'desc'"
							></image>
							<image
								style="width: 14rpx; height: 24rpx"
								src="../../static/sort.png"
								v-else
							></image>
						</view>
						<view class="sort-item">
							<view
								:class="{ active: iscurrent == 'price' }"
								@click="sorce('price')"
							>
								价格
							</view>
							<image
								style="width: 14rpx; height: 24rpx"
								src="../../static/asc.png"
								v-if="price == 'asc'"
							></image>
							<image
								style="width: 14rpx; height: 24rpx"
								src="../../static/desc.png"
								v-else-if="price == 'desc'"
							></image>
							<image
								style="width: 14rpx; height: 24rpx"
								src="../../static/sort.png"
								v-else
							></image>
						</view>
						<!-- <view
							class="sort-item"
							:class="{ active: iscurrent == 'ys' }"
							@click="YS()"
						>
							预售
						</view> -->
					</view>
					<!-- 商品 -->
					<scroll-view
						scroll-y="true"
						class="scroll-Y"
						style="height: 82vh"
						@scrolltolower="goodslower"
					>
						<view class="goods">
							<view
								v-for="item in goodsList"
								:key="item.id"
								class="goods-item"
								@click="goMallInfo(item.id)"
							>
								<view class="" style="position: relative">
									<image
										style="
											width: 350rpx;
											height: 350rpx;
											display: block;
										"
										:src="item.img"
									></image>
									<view class="ys-bar" v-if="item.is_ys == 1">
										{{ parseTime(item.ys_time) }} 开售
									</view>
								</view>
								<text class="goods_name">{{
									item.goods_name
								}}</text>
								<view class="price">
									<view
										class=""
										style="
											display: flex;
											align-items: center;
										"
										v-if="item.is_integral == 1"
									>
										<image
											style="
												width: 28rpx;
												height: 28rpx;
												margin-right: 10rpx;
											"
											src="../../static/icon.png"
											mode=""
										></image>
										<text
											style="
												font-size: 26rpx;
												line-height: 28rpx;
												color: #f75b5b;
											"
											>{{ item.integral }}</text
										>
									</view>
									<text
										v-else
										style="font-size: 26rpx; color: #f75b5b"
										>￥{{ item.price }}</text
									>
									<view class="love">
										<uni-icons
											:type="
												item.is_sc == 0
													? 'heart'
													: 'heart-filled'
											"
											:color="
												item.is_sc == 1 ? '#EC5050' : ''
											"
											size="17"
											@tap.stop="hope(item.id)"
										></uni-icons>
										<text
											style="
												font-size: 22rpx;
												padding-left: 8rpx;
												height: 34rpx;
											"
											>{{ item.sc_num }}</text
										>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</y-tab>
			<y-tab class="y-tab-virtual" :title="'无限赏'" name="2">
				<!-- 筛选 -->
				<view class="sort">
					<view class="sort-item">
						<view
							:class="{ active: iscurrent == 'price' }"
							@click="sorce('price')"
						>
							价格
						</view>
						<image
							style="width: 14rpx; height: 24rpx"
							src="../../static/asc.png"
							v-if="price == 'asc'"
						></image>
						<image
							style="width: 14rpx; height: 24rpx"
							src="../../static/desc.png"
							v-else-if="price == 'desc'"
						></image>
						<image
							style="width: 14rpx; height: 24rpx"
							src="../../static/sort.png"
							v-else
						></image>
					</view>
				</view>
				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 82vh"
					@scrolltolower="txlower"
				>
					<view class="content-wrap" style="background-color: #fff">
						<view
							v-for="item in wxList"
							:key="'wx' + item.id"
							class="wx-item"
							@click="goWX(item.id)"
						>
							<view class="wx-left">
								<image
									style="height: 256rpx; width: 254rpx"
									:src="item.img"
									mode=""
								></image>
							</view>
							<view class="wx-right">
								<view style="font-size: 28rpx">{{
									item.name
								}}</view>
								<view class="money" style="color: #eb2c2c">
									<text style="font-size: 20rpx">￥</text>
									<text style="font-size: 30rpx">{{
										item.price
									}}</text>
								</view>
								<view class="reward-list">
									<view
										style="
											margin-bottom: 10rpx;
											font-size: 20rpx;
										"
										>奖池列表</view
									>
									<view class="scroll-list">
										<view
											class="scroll"
											:style="{ '--imgnum': 6 }"
										>
											<view
												class="scroll-item"
												v-for="goods in [
													...item.box_goods,
													...item.box_goods,
												]"
												:key="'wxgoods' + goods.id"
											>
												<image
													style="
														width: 68rpx;
														height: 68rpx;
													"
													:src="goods.img"
													mode=""
												></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</y-tab>
			<y-tab class="y-tab-virtual" :title="'天选之人'" name="1">
				<!-- 筛选 -->
				<view class="sort">
					<view class="sort-item">
						<view
							:class="{ active: iscurrent == 'price' }"
							@click="sorce('price')"
						>
							价格
						</view>
						<image
							style="width: 14rpx; height: 24rpx"
							src="../../static/asc.png"
							v-if="price == 'asc'"
						></image>
						<image
							style="width: 14rpx; height: 24rpx"
							src="../../static/desc.png"
							v-else-if="price == 'desc'"
						></image>
						<image
							style="width: 14rpx; height: 24rpx"
							src="../../static/sort.png"
							v-else
						></image>
					</view>
				</view>
				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 82vh"
					@scrolltolower="wxlower"
				>
					<view class="content-wrap" style="background-color: #fff">
						<view
							v-for="item in txList"
							:key="'tx' + item.id"
							class="tx-item"
							@click="goTX(item.id)"
						>
							<view class="top">
								<text
									style="font-size: 46rpx; color: #725cff"
									>{{ item.name }}</text
								>
								<text style="font-size: 28rpx; color: #fff"
									>剩余{{
										item.leftover + '/' + item.sum
									}}</text
								>
							</view>
							<view class="image-group">
								<view class="img-left">
									<image
										style="width: 267rpx; height: 316rpx"
										:src="item.img"
										mode=""
									></image>
								</view>
								<view class="img-right">
									<view
										class="img-item"
										v-for="good in item.box_goods"
										:key="'good' + good.id"
									>
										<image
											style="
												width: 165rpx;
												height: 152rpx;
												background-color: #fff;
											"
											:src="good.img"
											mode=""
										></image>
									</view>
								</view>
							</view>
							<view class="corner">
								<text style="font-size: 28rpx">￥</text>
								<text
									style="margin-right: 4rpx; font-size: 36rpx"
									>{{ Number(item.price).toFixed(0) }}</text
								>
								<text style="font-size: 24rpx">每抽</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</y-tab>
		</y-tabs>
	</view>
</template>

<style lang="scss" scoped>
	.mall {
		background-color: #f5f5f5;

		.uni-mt-10 {
			width: 100%;
		}
		::v-deep .uni-searchbar {
			width: 100%;
			padding: 0;
			margin-top: 22rpx;
		}
		::v-deep .uni-searchbar__box {
			width: 100%;
			height: 56rpx;
			border: none;
			justify-content: start;
			// border-radius: 28rpx;
			// background-color: #ECEDEE;
			// padding: 0 20rpx;
			// box-sizing: border-box;
		}
		.sort {
			display: flex;
			align-items: center;
			width: 95%;
			padding: 22rpx;
			background-color: #fff;
			font-size: 26rpx;
			.sort-item {
				display: flex;
				align-items: center;
				margin-right: 34rpx;
			}
		}
		.goods {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 95%;
			padding: 20rpx;
			.goods-item {
				width: 350rpx;
				height: 542rpx;
				margin-bottom: 14rpx;
				background-color: #fff;
				border-radius: 14rpx;
				.ys-bar {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 50rpx;
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					font-size: 24rpx;
					line-height: 50rpx;
					text-align: center;
				}
				.goods_name {
					height: 74rpx;
					width: 100%;
					padding: 0 8rpx;
					// display: block;
					font-size: 28rpx;
					box-sizing: border-box;

					display: -webkit-box;
					-webkit-line-clamp: 2; /* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 超出部分用省略号表示 */
					white-space: normal; /* 允许换行 */
					/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
				}
				.price {
					width: 100%;
					box-sizing: border-box;
					margin-top: 32rpx;
					padding: 0 8rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.love {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
					}
				}
			}
		}
		.active {
			color: $all-color;
		}
	}
	.content-wrap {
		// height: 100%;
		padding: 30rpx 20rpx 0rpx 20rpx;
		// overflow-y: auto;
		// overflow-x: hidden;
		box-sizing: border-box;
		.tx-item {
			position: relative;
			height: 424rpx;
			margin-bottom: 30rpx;
			padding: 24rpx 28rpx 0 24rpx;
			background: url('https://ojqn.wm2177.com/wechat_imgs/txbg.png')
				no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			.top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: start;
			}
			.image-group {
				margin-top: 8rpx;
				display: flex;
				justify-content: space-between;
				.img-left {
					height: 316rpx;
					border-radius: 24rpx;
					margin-right: 22rpx;
					background-color: #fff;
					overflow: hidden;
					flex-shrink: 0;
				}
				.img-right {
					display: flex;
					justify-content: space-evenly;
					flex-wrap: wrap;
					.img-item {
						width: 165rpx;
						height: 152rpx;
						border-radius: 12rpx;
						background-color: #fff;
						overflow: hidden;
					}
				}
			}
			.corner {
				position: absolute;
				left: 0;
				bottom: 4rpx;
				width: 183rpx;
				height: 68rpx;
				border-radius: 0rpx 24rpx 0rpx 18rpx;
				background-color: #fd40a2;
				color: #fff;
				line-height: 68rpx;
				text-align: center;
			}
			&:last-child {
				margin-bottom: 300rpx;
			}
		}
		.wx-item {
			display: flex;
			align-items: center;
			height: 256rpx;
			margin-bottom: 26rpx;
			// background-color: pink;
			.wx-left {
				margin-right: 22rpx;
				border-radius: 6rpx;
				overflow: hidden;
			}
			.wx-right {
				height: 100%;
				width: 62%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.reward-list {
					width: 100%;
					height: 128rpx;
					padding: 12rpx 0 0 4rpx;
					border-radius: 4rpx;
					background-color: #f9fafc;
					box-sizing: border-box;
					.scroll-list {
						width: 430rpx;
						overflow: hidden;
						// width: calc(72rpx * var(--imgnum));
						.scroll {
							height: 84rpx;
							display: flex;
							// width: calc(72rpx * var(--imgnum));
							animation: scroll 20s linear infinite;
							.scroll-item {
								width: 72rpx;
								height: 72rpx;
								// margin: 3rpx;
								border-radius: 6rpx;
								flex-shrink: 0;
								overflow: hidden;
								box-sizing: border-box;
							}
						}
					}
				}
			}

			&:last-child {
				margin-bottom: 300rpx;
			}
		}
	}
	@keyframes scroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(
				calc(-426rpx)
			); /* 单个图片宽度 * 图片数量的一半 */
		}
	}
	/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
	.y-tab-virtual {
		position: relative;
		flex-shrink: 0;
		width: 100%;
	}
	::v-deep .y-tabs__ellipsis {
		overflow: visible !important;
	}
	.content-wrap {
		// height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
	::v-deep .y-tab {
		margin: 0 20rpx;
	}
	::v-deep .y-tab__text {
		font-size: 26rpx;
	}
	::v-deep .y-tabs__bar {
		background-color: #7863ff !important;
	}
</style>
